<script setup lang='ts'>
import { flowHttp } from '@fl/api/work-flow'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { ElSkeleton } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'

import { LEVEL_DICT, formCode } from './type'

const isloading = ref(true)
const route = useRoute()
const router = useRouter()
const form = ref()
async function getInfo() {
    try {
        const { data } = await flowHttp('detail', {
            body: {
                data: {
                    dataId: route.query.dataId,
                    formCode,
                    formOperationType: 0, // 查看
                    workflowCode: '1',
                },
            },
        })

        if (data.code === 200) {
            form.value = data.data.Data.FormField
            isloading.value = false
            console.log('🚀 ~ getInfo ~ form:', form.value)
        }
        else { ElMessage.error(data.msg) }
    }
    catch (error) {

    }
}
getInfo()
function goList() {
    router.replace('/business-management/application-settlement-list')
}
const businesslicense = computed(() => {
    return form.value?.f_8d8596c64b?.Value ?? ''
})
const IDcardfront = computed(() => {
    return form.value?.f_0454e88ece?.Value ?? ''
})

const IDcardreverseside = computed(() => {
    return form.value?.f_02ab4f8acb?.Value ?? ''
})
</script>

<template>
    <ElSkeleton v-if="isloading"
                :rows="5"
    />

    <div v-else
         class="p-30"
         style="background: white;"
    >
        <el-button @click="goList">
            返回列表
        </el-button>

        <div class="p-30">
            <div class="text-20 fw-bold">
                企业注册信息
            </div>

            <div class="mt-10">
                <el-form :model="form"
                         label-width="auto"
                >
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="企业名称">
                                {{ form?.f_890d19919d?.Value }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="企业简称">
                                {{ form?.f_d6553be533?.Value }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="统一信用代码">
                                {{ form?.f_76b14464ae?.Value }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="企业级别">
                                <span v-if="form?.f_2560989976_Id?.Value"
                                      class="px-8 py-2"
                                      :style="{
                                          color: `${LEVEL_DICT[form?.f_2560989976_Id?.Value].color}`,
                                          background: `${LEVEL_DICT[form?.f_2560989976_Id?.Value].bac}`,

                                      }"
                                >
                                    {{ LEVEL_DICT[form?.f_2560989976_Id?.Value].label }}
                                </span>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item v-if="form?.f_2560989976_Id?.Value === '2'"
                                          label="上级企业"
                            >
                                {{ form?.f_5776a615fe?.Value }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="注册日期">
                                {{ form?.CreatedTime?.Value }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="企业法人">
                                {{ form?.f_a3ef08da53?.Value }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="法人证件号码">
                                {{ form?.f_9e57637487?.Value }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="营业执照">
                                <UpdatedOss v-model="businesslicense"
                                            :disabled="true"
                                />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="企业法人身份证(正面)">
                                <UpdatedOss v-model="IDcardfront"
                                            :disabled="true"
                                />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="企业法人身份证(反面)">
                                <UpdatedOss v-model="IDcardreverseside"
                                            :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="企业注册地址">
                                {{ form?.f_0d6a1df67a?.Value }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div class="text-20 fw-bold">
                企业管理员信息
            </div>

            <div class="mt-10">
                <el-form :model="form"
                         label-width="auto"
                >
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="企业管理员账号">
                                {{ form?.f_cb460f65eb?.Value }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="姓名">
                                {{ form?.f_b1a692b43a?.Value }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="身份证号">
                                {{ form?.f_3a41650a44?.Value }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="手机号">
                                {{ form?.f_6478a32d1c?.Value }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="邮箱">
                                {{ form?.f_6c1a422694?.Value }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <div class="flex justify-center">
            <el-button @click="goList">
                返回
            </el-button>

            <!-- <el-button type="primary">
                通过
            </el-button> -->
        </div>
    </div>
</template>
